<script lang="ts" setup>
import pageVue from "/src/lib/lay/page.vue";
import control from "/src/lib/action/control.vue";
import { $ } from "../../../../lib/request";
import { reactive, ref } from "vue";
import { IDCardNumber, CarId } from "/src/lib/encrypt/editRules.ts";
import { modal } from "vxe-table";
let totalcar = ref(0);
let nzcszs = ref(0)
let drccl=ref(0)
let yrccl=ref(0)
//内转
const gridOptions1 = reactive({

  border: true,
  resizable: false,
  height: 384,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: false },
  editRules: {
    "CarId": CarId,
    "IDCardNumber": IDCardNumber,
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { field: "supplier", title: "供方名称", },
    { field: "carCard", title: "车牌号", editRender: { name: "$input" } },
    {
      field: "materialName",
      title: "物料名称",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "carNumber",
      title: "车次",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "isFull",
      title: "是否满料",
      showOverflow: true,
      editRender: {
        name: "$select",
        options: [
          { value: 1, label: "是" },
          { value: 0, label: "否" },

        ],
      },
    },
    {
      field: "driverName",
      title: "司机姓名",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "phone",
      title: "联系电话",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "idCard",
      title: "身份证号码",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "ss",
      title: "是否禁行",
      showOverflow: true,
      editRender: { name: "$input" },
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        return new Promise((resolve) => {
          const list = [] as any[];

          $.get("oa/saas/material/nzclxx.do", { params: {} }).then(
            (tableData) => {
              // console.log( tableData.data.data.nzclxx);
              nzcszs.value = tableData?.data?.data?.nzcszs;
              tableData.data?.data?.nzclxx?.forEach(
                ({
                  carCard,
                  carNumber,
                  driverName,
                  id,
                  idCard,
                  isFull,
                  materialName,
                  phone,
                  supplier
                }: any) => {
                  list.push({
                    carCard,
                    materialName,
                    isFull,
                    phone,
                    idCard,
                    supplier,
                    driverName,
                    id,
                    carNumber
                  });
                }
              );

              resolve({
                page: {
                  total: list.length,
                },
                result: list.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                ),
              });
            }
          );
        });
      },
    },
  },
});
//待入场
const gridOptions2 = reactive({
  border: true,
  resizable: false,
  height: 384,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: false ,showStatus:true},
  editRules: {
    nickname: CarId,
    IDCardNumber: IDCardNumber,
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { field: "supplier", title: "供方名称" },
    { field: "carCard", title: "车牌号", editRender: { name: "$input" } },
    {
      field: "materialName",
      title: "物料名称",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "driverName",
      title: "司机姓名",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "phone",
      title: "联系电话",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "idCard",
      title: "身份证号码",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "isEntry",
      title: "是否禁行",
      showOverflow: true,
      editRender: { name: "$input" },
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        return new Promise((resolve) => {
          const list = [] as any[];
          // 1待入场，2已入场，3排队
          $.get("oa/saas/material/ylclxx.do", { params: {status:'1'} }).then(
            (tableData) => {
              console.log(tableData.data.data);
              drccl.value = tableData?.data?.data?.ylcszs;
              tableData.data?.data?.ylclxx?.forEach(
                ({
                  carCard,
                  materialName,
                  isEntry,
                  phone,
                  idCard,
                  supplier,
                  driverName,
                  id,
                }: any) => {
                  list.push({
                    carCard,
                    materialName,
                    isEntry,
                    phone,
                    idCard,
                    supplier,
                    driverName,
                    id,
                  });
                }
              );

              resolve({
                page: {
                  total: list.length,
                },
                result: list.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                ),
              });
            }
          );
        });
      },
    },
  },
});
//2已入场
const gridOptions3 = reactive({
  border: true,
  resizable: false,
  height: 384,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: false },
  editRules: {
    nickname: CarId,
    IDCardNumber: IDCardNumber,
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { field: "supplier", title: "供方名称" },
    { field: "carCard", title: "车牌号", editRender: { name: "$input" } },
    {
      field: "materialName",
      title: "物料名称",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "driverName",
      title: "司机姓名",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "phone",
      title: "联系电话",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "idCard",
      title: "身份证号码",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "isEntry",
      title: "是否禁行",
      showOverflow: true,
      editRender: { name: "$input" },
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        return new Promise((resolve) => {
          const list = [] as any[];
          // 1待入场，2已入场，3排队
          $.get("oa/saas/material/ylclxx.do", { params: {status:'2'} }).then(
            (tableData) => {
              console.log(tableData.data.data);
              yrccl.value = tableData?.data?.data?.ylcszs;
              tableData.data?.data?.ylclxx?.forEach(
                ({
                  carCard,
                  materialName,
                  isEntry,
                  phone,
                  idCard,
                  supplier,
                  driverName,
                  id,
                }: any) => {
                  list.push({
                    carCard,
                    materialName,
                    isEntry,
                    phone,
                    idCard,
                    supplier,
                    driverName,
                    id,
                  });
                }
              );

              resolve({
                page: {
                  total: list.length,
                },
                result: list.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                ),
              });
            }
          );
        });
      },
    },
  },
});
//3排队
const gridOptions4 = reactive({
  border: true,
  resizable: false,
  height: 384,
  rowId: "id",
  checkboxConfig: {
    reserve: true,
  },
  pagerConfig: {
    pageSize: 10,
  },
  editConfig: { trigger: "click", mode: "row", enabled: false },
  editRules: {
    nickname: CarId,
    IDCardNumber: IDCardNumber,
  },
  columns: [
    {
      type: "checkbox",
      width: 50,
    },
    { field: "supplier", title: "供方名称" },
    { field: "carCard", title: "车牌号", editRender: { name: "$input" } },
    {
      field: "materialName",
      title: "物料名称",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "driverName",
      title: "司机姓名",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "phone",
      title: "联系电话",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "idCard",
      title: "身份证号码",
      showOverflow: true,
      editRender: { name: "$input" },
    },
    {
      field: "isEntry",
      title: "是否禁行",
      showOverflow: true,
      editRender: { name: "$input" },
    },
  ],
  proxyConfig: {
    seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
    props: {
      result: "result",
      total: "page.total",
    },
    ajax: {
      // 接收 Promise
      query: ({
        page: { currentPage, pageSize },
      }: {
        page: {
          currentPage: number;
          pageSize: number;
        };
      }) => {
        return new Promise((resolve) => {
          const list = [] as any[];
          // 1待入场，2已入场，3排队
          $.get("oa/saas/material/ylclxx.do", { params: {status:'3'} }).then(
            (tableData) => {
              console.log(tableData.data.data);
              totalcar.value = tableData?.data?.data?.ylcszs;
              tableData.data?.data?.ylclxx?.forEach(
                ({
                  carCard,
                  materialName,
                  isEntry,
                  phone,
                  idCard,
                  supplier,
                  driverName,
                  id,
                }: any) => {
                  list.push({
                    carCard,
                    materialName,
                    isEntry,
                    phone,
                    idCard,
                    supplier,
                    driverName,
                    id,
                  });
                }
              );

              resolve({
                page: {
                  total: list.length,
                },
                result: list.slice(
                  (currentPage - 1) * pageSize,
                  currentPage * pageSize
                ),
              });
            }
          );
        });
      },
    },
  },
});

// 初始化空对象
const initEmpty = (obj: object, init: number) => {
  Object.keys(obj).forEach((key) => {
    obj[key] !== init && !obj[key] && (obj[key] = init);
  });
  return obj;
};
const xTable = ref({} as any);
const yTable = ref({} as any);
const jTable = ref({} as any);
const hTable = ref({} as any);

const handleXiugai = () => {
 
  const $table = yTable.value;
  const selectRecords = $table.getCheckboxRecords();
  const addList = [] as any[];

  selectRecords.forEach(({ supplier, ...item }: any) => {
    addList.push(initEmpty({ ...item, operatorBy: demo1.formData3.name, operatorState: demo1.formData3.name }, 0));
  });

  if(addList.length>0){ 
  console.log("要传递的参数",JSON.stringify(addList).replace(/^\[+|\]+$/g, ""));

  $.get("oa/saas/material/ylclxxxg.do", {
    params: {
      updateList: JSON.stringify(addList).replace(/^\[+|\]+$/g, ""),
    },
  }).then((respose) => {
    console.log(respose);
    
    modal.message({ content: respose.data.message, status: "success" });
 demo1.formData3.address =""
   demo1.formData3.name=""
  demo1.value8 = false;
  });
  }else{
       modal.message({ content:'修改失败，请勾选行', status: "error" });
    }
  
};
const handleXiugai2 = () => {
  
  const $table = jTable.value;
  const selectRecords = $table.getCheckboxRecords();
  const addList = [] as any[];

  selectRecords.forEach(({ supplier, ...item }: any) => {
    addList.push(initEmpty({ ...item, operatorBy: demo1.formData3.name, operatorState: '我是傻逼所以改了！' }, 0));
  });

  if(addList.length>0){ 
  console.log("要传递的参数",JSON.stringify(addList).replace(/^\[+|\]+$/g, ""));
  $.get("oa/saas/material/ylclxxxg.do", {
    params: {
      updateList: JSON.stringify(addList).replace(/^\[+|\]+$/g, ""),
    },
  }).then((respose) => {
    console.log(respose);
    
    modal.message({ content: respose.data.message, status: "success" });
 demo1.formData3.address =""
   demo1.formData3.name=""
  });
  }else{
       modal.message({ content:'修改失败，请勾选行', status: "error" });
    }
    
};
const handleXiugai3 = () => {
  
 
  const $table = hTable.value;
  const selectRecords = $table.getCheckboxRecords();
  const addList = [] as any[];

  selectRecords.forEach(({ supplier, ...item }: any) => {
    addList.push(initEmpty({ ...item, operatorBy: '张恩良', operatorState: '我是傻逼所以改了！' }, 0));
  });
  console.log("要传递的参数",JSON.stringify(addList).replace(/^\[+|\]+$/g, ""));

    if(addList.length>0){ 
  $.get("oa/saas/material/ylclxxxg.do", {
    params: {
      updateList: JSON.stringify(addList).replace(/^\[+|\]+$/g, ""),
    },
    
  }).then((respose) => {
    
    console.log(respose);
    
    modal.message({ content: respose.data.message, status: "success" });
   demo1.formData3.address =""
   demo1.formData3.name=""
  });
    }else{
       modal.message({ content:'修改失败，请勾选行', status: "error" });
    }
  
};

let isEdit = ref(false);
const Pagechildren = [{ name: "top" }];
const demo1 = reactive({
  value8: false,
  value9: false,
  value10: false,
  value7: false,
  formData3: {
    name: "",
    address: "",
  },
  formRules3: {
    name: [
      { required: true, message: "请输入名称" },
      { min: 2, max: 5, message: "长度在 3 到 5 个字符" },
    ],
    address: [{ required: true, message: "请输入原因" }],
  },
});

const handleNeiZhuangXiugai = (()=>{
  const $table1 = xTable.value;
  const selectRecords = $table1.getCheckboxRecords();
  const addList = [] as any[];
  
  selectRecords.forEach(({ supplier, ...item }: any) => {
    addList.push(initEmpty({ ...item, operatorBy: '陈立明', operatorState: '我看行！' }, 0));
  });
    if(addList.length>0){
   console.log("要传递的参数",JSON.stringify(addList).replace(/^\[+|\]+$/g, ""));
  $.get("oa/saas/material/nzclxxxg.do", {
    params: {
      updateInList: JSON.stringify(addList).replace(/^\[+|\]+$/g, ""),
    },
  }).then((respose) => {
    console.log(respose);
    
    modal.message({ content: respose.data.message, status: "success" });
        demo1.formData3.address =""
   demo1.formData3.name=""
  });
    }else{
       modal.message({ content:'修改失败，请勾选行', status: "error" });
    }
   
})


</script>
<template lang="pug">
pageVue(:children="Pagechildren")
  template(v-slot:top)
    .hjk
      .topp 原料车辆实时管控
      .toppt 
        .ll 内转车辆：
        .cen
          .totalcar {{ nzcszs }}
        .unit 辆
      vxe-grid(v-bind="gridOptions1"  ref="xTable" highlight-hover-row  )
      .bot
        vxe-button.bott(style="margin-right: 20px"  @click="gridOptions1.editConfig.enabled=!gridOptions1.editConfig.enabled") {{ gridOptions1.editConfig.enabled? '取消修改' : '信息修改' }}
        vxe-button.bott(style="margin-right: 20px"  v-if="gridOptions1.editConfig.enabled" @click="demo1.value8=true") 确认修改
        vxe-modal(v-model="demo1.value7" title="处理信息" width="562" height="250" show-zoom resize)
          template(#default)
            vxe-form(:data="demo1.formData3" :rules="demo1.formRules3" title-align="right" title-width="90" @submit="handleNeiZhuangXiugai")
              vxe-form-item(title="操作员" field="name" span="12")
                template(#default)
                  vxe-input(v-model="demo1.formData3.name" placeholder="请输入名称")
              vxe-form-item(title="原因说明" field="address" span="24")
                template(#default)
                  vxe-textarea(v-model="demo1.formData3.address" autosize placeholder="请输入修改原因")
              vxe-form-item(align="center" span="24")
                template(#default)
                  vxe-button(type="submit" status="primary") 提交
      .toppt
        .ll 已入场车辆：
        .cen
          .totalcar {{ yrccl }}
        .unit 辆
      vxe-grid(v-bind="gridOptions3" ref="yTable" highlight-hover-row)
      .bot
        vxe-button.bott(style="margin-right: 20px"  @click="gridOptions3.editConfig.enabled=!gridOptions1.editConfig.enabled") {{ gridOptions3.editConfig.enabled? '取消修改' : '信息修改' }}
        vxe-button.bott(style="margin-right: 20px"  v-if="gridOptions3.editConfig.enabled" @click="demo1.value8=true") 确认修改
        vxe-modal(v-model="demo1.value8" title="处理信息" width="562" height="250" show-zoom resize)
          template(#default)
            vxe-form(:data="demo1.formData3" :rules="demo1.formRules3" title-align="right" title-width="90" @submit="handleXiugai")
              vxe-form-item(title="操作员" field="name" span="12")
                template(#default)
                  vxe-input(v-model="demo1.formData3.name" placeholder="请输入名称")
              vxe-form-item(title="原因说明" field="address" span="24")
                template(#default)
                  vxe-textarea(v-model="demo1.formData3.address" autosize placeholder="请输入修改原因")
              vxe-form-item(align="center" span="24")
                template(#default)
                  vxe-button(type="submit" status="primary") 提交
      .toppt
        .ll 排队车辆:
        .cen
          .totalcar {{ totalcar }}
        .unit 辆
      vxe-grid(v-bind="gridOptions4" ref="jTable" highlight-hover-row)
      .bot
        vxe-button.bott(style="margin-right: 20px"  @click="gridOptions4.editConfig.enabled=!gridOptions4.editConfig.enabled") {{ gridOptions4.editConfig.enabled ? '取消修改' : '信息修改' }}
        vxe-button.bott(style="margin-right: 20px"  v-if="gridOptions4.editConfig.enabled" @click="demo1.value9=true") 确认修改
        vxe-modal(v-model="demo1.value9" title="处理信息" width="562" height="250" show-zoom resize)
          template(#default)
            vxe-form(:data="demo1.formData3" :rules="demo1.formRules3" title-align="right" title-width="90" @submit="handleXiugai2")
              vxe-form-item(title="操作员" field="name" span="12")
                template(#default)
                  vxe-input(v-model="demo1.formData3.name" placeholder="请输入名称")
              vxe-form-item(title="原因说明" field="address" span="24")
                template(#default)
                  vxe-textarea(v-model="demo1.formData3.address" autosize placeholder="请输入修改原因")
              vxe-form-item(align="center" span="24")
                template(#default)
                  vxe-button(type="submit" status="primary") 提交
      .toppt
        .ll 待入场车辆:
        .cen
          .totalcar {{ drccl }}
        .unit 辆
      vxe-grid(v-bind="gridOptions2" ref="hTable" highlight-hover-row)
      .bot
        vxe-button.bott(style="margin-right: 20px"  @click="gridOptions2.editConfig.enabled=!gridOptions2.editConfig.enabled") {{ gridOptions2.editConfig.enabled ? '取消修改' : '信息修改' }}
        vxe-button.bott(style="margin-right: 20px"  v-if="gridOptions2.editConfig.enabled" @click="demo1.value10=true") 确认修改
        vxe-modal(v-model="demo1.value10" title="处理信息" width="562" height="250" show-zoom resize)
          template(#default)
            vxe-form(:data="demo1.formData3" :rules="demo1.formRules3" title-align="right" title-width="90" @submit="handleXiugai3")
              vxe-form-item(title="操作员" field="name" span="12")
                template(#default)
                  vxe-input(v-model="demo1.formData3.name" placeholder="请输入名称")
              vxe-form-item(title="原因说明" field="address" span="24")
                template(#default)
                  vxe-textarea(v-model="demo1.formData3.address" autosize placeholder="请输入修改原因")
              vxe-form-item(align="center" span="24")
                template(#default)
                  vxe-button(type="submit" status="primary") 提交
</template>
<style lang="scss" scoped>
.hjk {
  display: grid;
  gap: 20px;
  padding: 48px;
}
.topp {
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #5d5d5d;
}
.toppt {
  align-items: center;
  display: flex;
  font-size: 18px;
  line-height: 18px;
  color: #000000;
  .cen {
    width: 63px;
    height: 31px;
    background: #eeeeee;
    margin-right: 4px;
    padding: 0 5px;
    overflow-x: visible;
    .totalcar {
      line-height: 31px;
      font-size: 18px;
    }
  }
}
.headerr {
  width: 86%;
  margin: 20px auto;
  font-size: 18px;
  font-family: Source Han Sans CN;
  line-height: 36px;
  color: #000000;
  background: #f0faf2;
  border-radius: 10px;
  padding: 20px;
  .text {
    margin-left: 40px;
  }
}
.mid {
  font-size: 18px;
  color: #5d5d5d;
  font-weight: bold;
}
.bot {
  // display: flex;
  text-align: center;
  margin-bottom: -20px;
  .bott {
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 0 5px;
    height: 34px;
    background: #f0faf2;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.16);
    border-radius: 10px;
    font-size: 18px;
    line-height: 34px;
    color: #5d5d5d;
  }
}
</style>
